<template>
  <el-auto-resizer style="min-height: 200px">
    <template #default="{ height, width }">
      <el-table-v2
        :columns="columns"
        :data="data"
        :width="width"
        :height="height"
        fixed
      />
    </template>
  </el-auto-resizer>
</template>

<script setup lang="ts">
import store from "~/utils/store";
import server_api from "~/utils/server_api";
import type { Column } from "element-plus";
const config = toRef(store);
const local_list = computed(() => config.value.server.usbip.devices.local);
const bind_list = computed(() => config.value.server.usbip.bind);
const data = computed(() => {
  let res = [];
  for (let item in local_list.value) {
    res.push(local_list.value[item]);
  }
  return res;
});
const columns: Column<any>[] = [
  {
    key: "id",
    dataKey: "id",
    title: `设备ID`,
    width: 100,
    align: "center",
  },
  {
    key: "address",
    dataKey: "address",
    title: `设备地址`,
    width: 100,
    align: "center",
  },
  {
    key: "vendor",
    dataKey: "vendor",
    title: `供应商`,
    width: 350,
    align: "center",
  },
  {
    key: "product",
    dataKey: "product",
    title: `产品名称`,
    width: 350,
    align: "center",
  },
  {
    key: "described",
    dataKey: "described",
    title: `描述`,
    width: 350,
    align: "center",
  },
  {
    key: "state",
    dataKey: "id",
    title: `分享状态`,
    width: 100,
    align: "center",
    cellRenderer: ({ cellData: id }) =>
      h(ElTag, { type: bind_list.value[id] ? "success" : "info" }, () =>
        bind_list.value[id] ? "已分享" : "未分享"
      ),
  },
  {
    key: "functino",
    dataKey: "id",
    title: `动作`,
    width: 100,
    align: "center",
    cellRenderer: ({ cellData: id }) =>
      h(
        ElButton,
        {
          type: bind_list.value[id] ? "warning" : "success",
          loading: server_api.ticks.bind > 0,
          onClick: () => {
            if (bind_list.value[id]) server_api.unbind(id);
            else server_api.bind(id);
          },
        },
        () => (bind_list.value[id] ? "卸载" : "挂载")
      ),
  },
];
</script>

<style scoped></style>
